﻿@model IList<ArticleInfo>
<div style="width: 740px; overflow: hidden;">
    <div id="ISL_Cont" style="width: 100000px;">
        @foreach (var item in Model)
        {
            <div class="scroll">
                <a href="@Url.Action("Catalog","CArticle")?aid=@item.ContentId&num=@item.Numbers">
                    <img src="@item.ImgUrl" alt="@item.Title" 
                         title="@item.Title" /></a>
            </div>
        }
    </div>

</div>
<style type="text/css">
    .scroll {
        width: 149.8px;
        height: 212px;
        text-align: center;
        float: left;
        
    }

        .scroll img {
            border: none;
            width: 140px;
            height: 212px;
            float:left;
        }


    .main_con .con_right {
        width: 200px;
        float: right;
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    $(function () {

        //首次开播
        AutoPlay();

        $("#ISL_Cont").hover(function () {
            clearInterval(playInterval);
        }, function () {
            AutoPlay();
        });

    })

    function AutoPlay() { //自动滚动
        clearInterval(playInterval);
        playInterval = setInterval('play();', 6000); //间隔时间
    }

    var playInterval = null;
    var block = false; //
    var picNum = 5; //开播起步价 5张图片开播
    //开播
    function play() {
        if ($(".scroll").size() > picNum && !block) {
            var $p = $(".scroll").eq(0).clone();
            $p.width(0).animate({ width: $(".scroll").width() }, 3000).appendTo($("#ISL_Cont"));
            block = true;
            $(".scroll").eq(0).animate({ marginLeft: -$(".scroll").width() }, 3000, function () {
                $(this).remove();
                block = false;
               
            });

        } else {
            // alert($(".pic").size());
        }
    }

</script>
